<template>
  <div class="dialog">
    <el-dialog
      title="调整班级"
      :visible.sync="isShowDialogComponent"
      width="50%"
      :before-close="handleClose">
      <el-form v-loading="loading">
        <div class="ps">(*当调整班级时，应先选择学科，再选择班级)</div>
        <span class="current-semester">当前启用学期 :{{ currentSemester }}</span>
        <span class="choose-box">用户姓名 :{{ adjustmentInfo.Name }}</span>
        <span class="choose-box">当前学科 :{{adjustmentInfo.SubjectName}}</span>
        <span class="choose-box">当前班级 :{{ adjustmentInfo.ClassName }}</span>
        <div class="choose-box">
          <div class="box">
            <span class="title">选择学科 :</span>
            <el-select v-model="form.CompanySubjectID" placeholder="请选择学科" @change="companySubjectChange">
              <el-option
                v-for="(item,index) in subjectList"
                :key="index"
                :label="item.Text"
                :value="item.Value">
              </el-option>
            </el-select>
          </div>
          <div class="box">
            <span class="title" id="second-title">选择班级 :</span>
            <el-select v-model="form.CompanyCurriculumID" placeholder="请选择班级">
              <el-option
                v-for="(item,index) in classList"
                :key="index"
                :label="item.Text"
                :value="item.Value">
              </el-option>
            </el-select>
          </div>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="handleClose" :disabled="loading">取 消</el-button>
    <el-button type="primary" @click="submitEvent" :disabled="loading">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import Semester from '../../../model/semester'
import CompanySubject from '../../../model/companySubject'
import CompanyCurriculum from '../../../model/companyCurriculum'
import CourseOrder from '../../../model/courseOrder'

export default {
  name: 'ClassAdjustmentDialog',
  props: {
    isShowDialogComponent: Boolean,
    //获取调整班级的主键ID
    adjustmentMainId: Number,
    //获取调整班级的那一条的所有信息
    adjustmentInfo: []
  },
  data () {
    return {
      loading: false,
      form: {
        ID: this.adjustmentMainId,
        SemesterID: '',
        CompanySubjectID: '',
        CompanyCurriculumID: ''
      },
      //保存学期信息
      currentSemester: '',
      //保存学科信息
      subjectList: [],
      //保存班级信息
      classList: []
    }
  },
  created () {
    this.getSemesterId()
    console.log(this.adjustmentInfo)
  },
  methods: {
    handleClose (payload) {
      this.$emit('handleClose', payload)
    },
    async submitEvent () {
      if (this.form.CompanySubjectID === '') {
        this.$message.error('请选择学科')
      } else if (this.form.CompanyCurriculumID === '') {
        this.$message.error('请选择班级')
      } else {
        try {
          this.loading = true
          const res = await CourseOrder.ClassAdjustment(this.form)
          this.$message.success('成功调整班级')
          this.handleClose('submitButton')
          this.loading = false
          console.log(res)
        } catch (err) {
          this.loading = false
        }
      }
    },
    //当前正在启用的学期ID
    async getSemesterId () {
      const res = await Semester.GetCurrentSemester()
      this.form.SemesterID = res[0].Value
      this.currentSemester = res[0].Text
      await this.getCompanySubjectId()
    },
    //获取学科ID
    async getCompanySubjectId () {
      const res = await CompanySubject.PageSearchList({ ID: this.form.SemesterID })
      this.subjectList = res
    },
    //学科下拉框中的数据变化时候触发--获取课程ID
    async companySubjectChange (value) {
      const res = await CompanyCurriculum.PageSearchList({ ID: value })
      this.classList = res
    },

  }

}
</script>

<style scoped>
.dialog {
  position: relative;
}

.ps {
  position: absolute;
  color: #DC143C;
  font-weight: bold;
  font-size: 12px;
  top: 25px;
  left: 100px;

}

.current-semester {
  color: #DC143C;
  font-weight: bold;
}

.choose-box {
  display: flex;
  margin-top: 40px;
}

.choose-box .box {
  display: flex;
}

.title {
  width: 75px;
  line-height: 40px;
}

#second-title {
  margin-left: 100px;
}
</style>
